<template>
	<view>
		<!-- 头部固定区域 -->
		<view class="topPlay" :style="{height: navHeight + topHeight + 'px'}">
			<view class="top" :style="{height: topHeight + 'px'}"></view>
			<view class="mid" :style="{height: navHeight + 'px'}">
				<view class="leftTop">
					<image class="backIcoB" @click="back()" src="@/static/images/other/back.png"></image>
					<!-- <view class="studyNum">15</view>
					<view class="lastWord">course n.课程;球场</view> -->
				</view>
			</view>
		</view>
		
		<!-- 单词展示区域 -->
		<view class="wordShow" :style="{marginTop: navHeight + topHeight + 'px'}">
			<view class="bigWord">
				<view class="word" :style="{'color':themeColor}">{{word.word}}</view>
				<image v-if="!word.isCollection" src="@/static/images/other/coll.png" @click="changeCollect"></image>
				<image v-if="word.isCollection" src="@/static/images/other/coll_succ.png" @click="changeCollect"></image>
			</view>
			<view class="symbol">
				<view>{{word.accent}}</view>
				<image src="@/static/images/other/voice.png" @click="playAudio()"></image>
			</view>
		</view>
		
		<!-- 提示部分区域 -->
		<view class="tips">
			<!-- 去掉图片提示 -->
			<!-- <view class="tipImg" v-if="tipIndex == 1">
				<image mode="widthFix" src="https://ali.bczcdn.com/r/d_105_5575_0_2_20150809054840.png"></image>
			</view> -->
			<view class="wordEtyma1" v-if="tipIndex == 1">{{word.meanEn}}</view>
			<view class="wordEtyma2" v-if="tipIndex == 2">{{word.wordEtyma}}</view>
			<view class="wordEtyma3" v-if="tipIndex == 3">
				<view class="adj">{{word.prefix}}.</view>
				<view>{{word.meanCn}}</view>
			</view>
		</view>
		
		<!-- 底部选项区域 -->
		<view class="spe">
			<view class="bottom">
				<view class="reciteMain">
					<view class="reciteItem" v-for="(item,index) in word.reciteOptionWords"
					 :class="[index + 1 == optionIndex ? index + 1 == collectOption ? 'collectItem' : 'errorItem' : '', index + 1 == lookAnswIndex ? 'collectItem' : '']"
					  @click="checckOption(index + 1)">
						<view class="left">
							<view class="root" :class="((index + 1 == optionIndex) || (index + 1 == lookAnswIndex))? 'rootSelect' : ''">
								{{index + 1 == optionIndex || (index + 1 == lookAnswIndex) ? item.word : (item.prefix+".")}}
							</view>
							<view class="mean" :class="((index + 1 == optionIndex && index + 1 == collectOption) || (index + 1 == lookAnswIndex)) ? 'meanSelect' : ''">
								{{index + 1 == optionIndex || (index + 1 == lookAnswIndex) ? (item.prefix+"."+item.meanCn) : item.meanCn}}
							</view>
						</view>
						<image v-if="((index + 1 == collectOption && index + 1 == optionIndex) || (index + 1 == lookAnswIndex))" src="@/static/images/other/correct.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="options">
					<view class="optionItem" @click="toWord">
						<text>已学习</text>
						<view :style="{'backgroundColor':themeColor}"></view>
					</view>
					<view class="optionItem" @click="tip">
						<text>提示下</text>
						<view :style="{'backgroundColor':themeColor}"></view>
					</view>
					<view class="optionItem" @click="lookAnsw">
						<text>看答案</text>
						<view :style="{'backgroundColor':themeColor}"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提示信息弹窗 -->
		<popup ref="popup"></popup>
	</view>
</template>

<script>
	import {reciteInfo,changeCollect,wordStudy,wordWrong} from "@/api/word.js";
	import popup from "@/components/popup.vue";
	export default {
		components:{popup},
		data() {
			return {
				topHeight:0,
				navHeight:0,
				tipIndex:0,
				collectStatus:false,
				innerAudioContext:null,
				optionIndex:0,
				collectOption:2,
				lookAnswIndex:0,
				wordIndex:-1,
				wordId:0,
				isWrong:false,
				word:{},
				themeColor:"",
				themeColorLess:"",
			}
		},
		async onLoad(options) {
			//获取主题颜色
			let color = uni.getStorageSync("color");
			this.themeColor = JSON.parse(color).themeColor;
			this.themeColorLess = JSON.parse(color).themeColorLess;
			this.wordIndex = options.wordIndex;
			this.topHeight = getApp().globalData.statusBarHeight;
			this.navHeight = getApp().globalData.navigationBarHeight;
			
			let wordIds = uni.getStorageSync("wordIds");
			
			this.wordId = wordIds[options.wordIndex];
			console.log(this.wordIndex,wordIds);
			let ans = (await reciteInfo(this.wordId)).data;
			console.log(ans);
			if (ans.code != 200) {
				this.$refs.popup._popError(ans.error);
				return;
			}
			this.word = ans.data;
			for (let i = 1; i <= this.word.reciteOptionWords.length; i ++) {
				if (this.word.reciteOptionWords[i - 1].isCorrect){
					this.collectOption = i;
					break;
				}
			}
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = true;
			this.innerAudioContext.src = this.word.wordAudio;
		},
		methods: {
			back(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			toWord(){
				this.setWordStudy();
				uni.navigateTo({
					url:"/pages/word/word?wordId="+this.wordId+"&wordIndex="+this.wordIndex,
				})
			},
			tip(){
				this.tipIndex++;
				if (this.tipIndex == 4) {
					this.toWord();
				}
			},
			async changeCollect() {
				let isCollection = !this.word.isCollection;
				let ans = (await changeCollect(this.wordId,isCollection)).data;
				if (ans.code != 200) {
					this.$refs.popup._popError(ans.error);
					return;
				}
				console.log(ans);
				this.word.isCollection = isCollection;
			},
			playAudio(){
				this.innerAudioContext.play();
			},
			checckOption(index){
				this.optionIndex = index;
				if (this.optionIndex != this.collectOption) {
					this.tipIndex++;
					if (!this.isWrong) {
						this.setWordWrong();
						this.isWrong = true;
					}
					if (this.tipIndex == 4) {
						this.toWord();
					}
				} else {
					setTimeout(()=>{
						this.toWord();
					},800)
				}
			},
			lookAnsw(){
				this.lookAnswIndex = this.collectOption;
				console.log(this.lookAnswIndex)
			},
			async setWordStudy(){
				let ans = (await wordStudy(this.wordId)).data;
				if (ans.code != 200) {
					this.$refs.popup._popError(ans.error);
					return;
				}
				console.log(ans);
			},
			async setWordWrong(){
				let ans = (await wordWrong(this.wordId)).data;
				if (ans.code != 200) {
					this.$refs.popup._popError(ans.error);
					return;
				}
				console.log(ans);
			},
		}
	}
</script>

<style lang="scss">
	/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
	@font-face {
	  font-family: "站酷酷黑 Regular";font-weight: 400;src: url("//at.alicdn.com/wf/webfont/o0WWhG36b3mC/h4IXAXfdHly_eb_tzMEvs.woff2") format("woff2"),
	  url("//at.alicdn.com/wf/webfont/o0WWhG36b3mC/mBJGoszH5x2wMHXZ_qsLj.woff") format("woff");
	  font-display: swap;
	}
	page{
		background-color: $bg-color;
	}
	// 头部固定区域
	.topPlay{
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 100;
		
		.top{
			width: 100%;
			background-color: $bg-color;
		}
		
		.mid{
			background-color: $bg-color;
			margin: 0 $both-sides;
			
			.leftTop{
				display: flex;
				height: 100%;
				align-items: center;
				color: #8d929a;
				font-size: 22rpx;
				
				.backIcoB{
					height: 40rpx;
					width: 40rpx;
				}
				
				.studyNum{
					padding-left: 20rpx;
				}
				
				.lastWord{
					padding-left: 40rpx;
				}
			}
		}
	}
	
	// 单词展示区域
	.wordShow{
		margin-left: $both-sides;
		margin-right: $both-sides;
		
		.bigWord{
			margin: 120rpx $both-sides 0 $both-sides;
			display: flex;
			
			.word{
				font-size: 70rpx;
				font-weight: 600;
			}
			image{
				height: 44rpx;
				width: 44rpx;
				margin-left: 40rpx;
				margin-top: 32rpx;
			}
		}
		.symbol{
			margin: 20rpx $both-sides 0 $both-sides;
			color: #8d929a;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			
			image{
				height: 44rpx;
				width: 44rpx;
				padding-left: 30rpx;
			}
		}
	}
	
	// 提示部分区域
	.tips{
		margin: 60rpx $both-sides 0 $both-sides;
		
		.tipImg{
			width: 100%;
			display: flex;
			justify-content: center;
			
			image{
				width:50%;
				border-radius: 10rpx;
			}
		}
		
		.wordEtyma1{
			padding: 26rpx 16rpx;
			font-size: 22rpx;
		}
		
		.wordEtyma2{
			color: #383e43;
			font-size: 30rpx;
			padding: 26rpx 16rpx;
			background-color: #EDEEF2;
			border-radius: 16rpx;
			font-weight: 600;
		}
		
		.wordEtyma3{
			padding: 26rpx 16rpx;
			font-size: 26rpx;
			font-weight: 600;
			display: flex;
		}
		
	}
	
	// 底部选项区域
	.spe{
		width: 100%;
		position: absolute;
		bottom: 0;
		
		.bottom{
			
			.reciteMain{
				margin: 0 30rpx;
				
				.collectItem{
					background-color: #a0e7c7 !important;
					box-shadow: 0rpx 0rpx 16rpx -8rpx #30d4dc !important;
				}
				.errorItem{
					background-color: #ffcecf !important;
					box-shadow: 0rpx 0rpx 16rpx -8rpx #ff000c !important;
				}
				.reciteItem{
					width: 100%;
					height: 130rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #fafbff;
					margin-bottom: 18rpx;
					border-radius: 10rpx;
					box-shadow: 0rpx 0rpx 16rpx -8rpx #9dbae6;
					
					.left{
						display: flex;
						flex-direction: column;
						justify-content: center;
						.root{
							padding-left: 16rpx;
							font-size: 26rpx;
							color: #5c5e5f;
							font-style: italic;
							font-weight: 600;
						}
						
						.rootSelect{
							font-style: normal !important;
							font-size: 30rpx !important;
							color: #010102 !important;
						}
						
						.mean{
							padding-left: 16rpx;
							padding-top: 8rpx;
							font-size: 30rpx;
							color: #46464a;
							font-weight: 600;
						}
						
						.meanSelect{
							font-size: 28rpx !important;
						}
					}
					
					image{
						width: 40rpx;
						margin-right: 20rpx;
					}
				}
			}
			
			.options{
				padding: 0 $both-sides 0 $both-sides;
				margin: 80rpx 20rpx 80rpx 20rpx;
				display: flex;
				justify-content: space-between;
				
				.optionItem{
					color: #616B7F;
					font-size: 28rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					
					view{
						width: 24rpx;
						height: 8rpx;
						margin-top: 12rpx;
						border-radius: 4rpx;
					}
				}
			}
		}
	}
	
</style>
